<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- This setup is not suitable for production. -->
  <!-- Only use it in development! -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- <script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script> -->
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react?dev",
        "react-dom/client": "https://esm.sh/react-dom/client?dev"
      }
    }
  </script>
  <script type="text/babel" data-type="module">
        import React,{StrictMode,useState} from 'react'
        import { createRoot} from 'react-dom/client'
    // 定义单元格组件
    const Square= ({value,onSquareClick})=>{
        return (
            <button className='square' onClick={onSquareClick}>
                {value}
                </button>
        )
    }
    // 定义九宫格组件
    const Board=({squares,xIsNext,onPlay})=>{
        // squares是一个数组，存储['x','o',"",""...]
        //xIsNext;ture或者false；

        
        const handleClick=(i)=>{
            if(squares[i]) return;
            // 定义点击后修改的数组
            
            const nextSquares=squares.slice()//浅拷贝一个数组
            if(xIsNext){
                nextSquares[i]='X' //i决定修改哪一个元素
            }else{
                nextSquares[i]='O' //i决定修改哪一个元素
            }
            console.log(nextSquares)
            // 调用修改状态的方法
            onPlay(nextSquares)
        }
        return(
            <>
            <div className="board-row">
                <Square value={squares[0]} onSquareClick={()=>handleClick(0)} />
                 <Square value={squares[1]} onSquareClick={()=>handleClick(1)} />
                 <Square value={squares[2]} onSquareClick={()=>handleClick(2)} />

                </div>
            <div className="board-row">
                <Square value={squares[3]} onSquareClick={()=>handleClick(3)} />
               <Square value={squares[4]} onSquareClick={()=>handleClick(4)} />
               <Square value={squares[5]} onSquareClick={()=>handleClick(5)} />

                </div>

            <div className="board-row">
                <Square value={squares[6]} onSquareClick={()=>handleClick(6)} />
               <Square value={squares[7]} onSquareClick={()=>handleClick(7)} />
               <Square value={squares[8]} onSquareClick={()=>handleClick(8)} />

                </div>

            </>
        )
    }

    let App=()=>{
        // 创建栈，是一个数组，内部是[item,[]] item:Array 记录每次的变化
        const [history,setHistory] =useState([Array(9).fill(null)])
    //定义当前的数据步骤
    const [currentMove,setCurrentMove]=useState(0) 
    //决定下一次是X还是O, 也决定第一次是X或者是O
        const xIsNext =currentMove%2===0;
        const currentSquares=history[currentMove] //决定展示当前数组数据
        //点击单元格以后，触发数据处理
       const handlePlay=(nextSquares)=>{
            // 定义新一次的记录
            const nextHistory=[...history.slice(0,currentMove+1),nextSquares]
            setHistory(nextHistory)
            setCurrentMove(history.length-1)
            console.log('nextHistory',nextHistory)
            
       }

        return(
            <div className='game'>
                <div className="game-board">
                    <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
              </div>
              <div className="game-info">

              </div>
        </div>
        )
    }




    //   定义根节点
    const root=createRoot(document.getElementById('root'))
    root.render(
        <StrictMode>
           <App />
        </StrictMode>
    )
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      margin: 20px;
      padding: 0;
    }

    h1 {
      margin-top: 0;
      font-size: 22px;
    }

    h2 {
      margin-top: 0;
      font-size: 20px;
    }

    h3 {
      margin-top: 0;
      font-size: 18px;
    }

    h4 {
      margin-top: 0;
      font-size: 16px;
    }

    h5 {
      margin-top: 0;
      font-size: 14px;
    }

    h6 {
      margin-top: 0;
      font-size: 12px;
    }

    code {
      font-size: 1.2em;
    }

    ul {
      padding-inline-start: 20px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      margin: 20px;
      padding: 0;
    }

    .square {
      background: #fff;
      border: 1px solid #999;
      float: left;
      font-size: 24px;
      font-weight: bold;
      line-height: 34px;
      height: 34px;
      margin-right: -1px;
      margin-top: -1px;
      padding: 0;
      text-align: center;
      width: 34px;
    }

    .board-row:after {
      clear: both;
      content: "";
      display: table;
    }

    .status {
      margin-bottom: 10px;
    }
    .game {
      display: flex;
      flex-direction: row;
    }

    .game-info {
      margin-left: 20px;
    }
  </style>
</html>
